<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="val => emit('update:visible', val)"
    title="举报"
    width="400px"
    :close-on-click-modal="false"
  >
    <div>
      <div style="margin-bottom: 12px;">请选择举报理由：</div>
      <el-radio-group v-model="selectedReason">
        <el-radio v-for="reason in reasons" :key="reason" :label="reason">{{ reason }}</el-radio>
      </el-radio-group>
      <el-input
        v-model="customReason"
        type="textarea"
        :rows="2"
        maxlength="100"
        placeholder="补充或自定义举报理由（可选）"
        style="margin-top: 12px;"
        :disabled="selectedReason !== '其他'"
      />
    </div>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交举报</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import { createReport } from '../api/report'

const props = defineProps<{
  visible: boolean,
  reporterID: string | number,
  targetType: string,
  targetId: string | number
}>()
const emit = defineEmits(['update:visible'])

const reasons = [
  '广告/垃圾信息',
  '恶意攻击/辱骂',
  '色情/低俗内容',
  '违法/侵权',
  '其他'
]
const selectedReason = ref('广告/垃圾信息')
const customReason = ref('')

watch(() => props.visible, (val) => {
  if (val) {
    selectedReason.value = reasons[0]
    customReason.value = ''
  }
})

const handleCancel = () => {
  emit('update:visible', false)
}

const handleSubmit = async () => {
  let reason = selectedReason.value
  if (selectedReason.value === '其他' && !customReason.value.trim()) {
    ElMessage.error('请填写举报理由')
    return
  }
  if (customReason.value.trim()) {
    reason = customReason.value.trim()
  }
  // 参数校验
  if (!props.reporterID || !props.targetType || !props.targetId || !reason) {
    ElMessage.error('举报信息不完整，请检查后重试')
    return
  }
  try {
    await createReport({
      reporterId: Number(props.reporterID),
      targetType: props.targetType,
      targetId: Number(props.targetId),
      reason
    })
    ElMessage.success('举报提交成功')
    ElMessage.info('感谢您的举报，我们会尽快处理')
    emit('update:visible', false)
  } catch (e) {
    ElMessage.error('举报提交失败，请稍后重试')
  }
}
</script>

<style scoped>
.el-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
</style>
